<template>
  <a-modal :open="open" width="1200px" title="新增检验申请单" centered class="z-[999]" @cancel="onCancel" @ok="onOk">
    <div class="flex mt-7 overflow-auto justify-between">
      <div class="w-[45%] cursor-pointer overflow-auto mx-2">
        <BaseTable
          column-code="000228"
          :data-source="tableData"
          :custom-row="onClickRow"
          row-key="categroyCode"
          :row-class-name="(record) => (record.categroyCode === categroyCode ? 'selected-row cursor-pointer' : 'cursor-pointer')"
          :scroll="{ x: 400, y: 430 }"
          :height="380"
          :loading="loading"
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex == 'xh'">
              {{ index + 1 }}
            </template>
          </template>
        </BaseTable>
      </div>
      <div class="flex-1 overflow-auto">
        <BaseTable
          column-code="000229"
          :data-source="projectData"
          row-key="id"
          :scroll="{ x: 400, y: 430 }"
          :height="380"
          :loading="loadingProject"
          :row-selection="rowSelection"
        />
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'

const categroyCode = ref('')
const selectedRowKeys = ref([])
const selectedRows = ref([])
const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  laboratoryData: {
    type: Object,
    default: () => ({})
  }
})

const { loading, getData, tableData } = useTable({
  url: '/lis/InstrumentType/getLisCategroyList',
  onSuccess: (data) => {
    categroyCode.value = props.laboratoryData.categoryCode || data[0]?.categroyCode
    selectedRowKeys.value = []
    getProjectData()
  }
})

// lsh: props.tableRow.lsh
const {
  loading: loadingProject,
  getData: getProjectData,
  tableData: projectData
} = useTable({
  url: '/lis/LisApply/getlisInstrumentTypeRelationByCategroyCodeList',
  formatParams: () => {
    return {
      categroyCode: categroyCode.value
    }
  },
  formatResult: (data) => {
    return data.map((item) => {
      return {
        ...item,
        id: item.lisSetId || item.orderItemCode,
        type: item.lisSetId ? '组套' : '项目'
      }
    })
  }
  // formatResult: (data) => {
  //   selectedRowKeys.value = data.map((i) => {
  //     if (i.chek === 1) return i.orderItemCode
  //   })
  //   return data
  // },
  // onSuccess: () => {
  //   selectedRowKeys.value = props.laboratoryData.orderItemCodes.split(',')
  // }
})

const onClickRow = (record) => {
  return {
    onClick: () => {
      categroyCode.value = record.categroyCode
      selectedRowKeys.value = []
      getProjectData()
    }
  }
}

const rowSelection = ref({
  checkStrictly: true,
  selectedRowKeys: selectedRowKeys,
  onChange: (rowKeys, rows) => {
    selectedRowKeys.value = rowKeys
    selectedRows.value = rows
  }
})

const onOk = async () => {
  emit('update:open', false)
  if (selectedRowKeys.value.length === 0) return
  // const itemList = selectedRowKeys.value.map((i) => {
  //   const res = projectData.value.find((item) => item.orderItemCode === i)
  //   return { orderItemCode: res.orderItemCode, orderItemName: res.mc }
  // })
  const lisInpTemplateItems = []
  const lisSetIdList = []
  selectedRows.value.forEach((item) => {
    if (item.type === '组套') {
      lisSetIdList.push(item.id)
    } else {
      lisInpTemplateItems.push({ orderItemCode: item.orderItemCode, orderItemName: item.mc })
    }
  })
  emit('success', { categoryCode: categroyCode.value, lisInpTemplateItems, lisSetIdList })
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
    }
  }
)
</script>
<style lang="less" scoped>
.patient-info-header {
  background-color: var(--primary-color);
}
</style>
